<template>
  <div>
    <el-card class="box-card" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>用户数据</span>
        </div>
      </template>
      <div>
        <el-table :data="userdata" style="width: 100%">
          <el-table-column prop="username" label="用户名"></el-table-column>
          <el-table-column prop="userphone" label="电话"></el-table-column>
          <el-table-column prop="identity" label="身份">
            <template #default="scope">
              <el-tag>{{ identityLabel(scope.row.identity) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="password" label="密码"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="text" @click="editUser(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog v-model="editDialogVisible" title="编辑用户信息">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="editForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="editForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="editForm.userphone"></el-input>
        </el-form-item>
        <el-form-item label="身份">
          <el-input v-model="editForm.identity" disabled></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '@/router'
const route = useRoute()
const username = route.query.username
const password = route.query.password
const userdata = ref([])
const editForm = ref({
  id: '',
  username: '',
  password: '',
  identity: '',
  userphone: '',
  userstate: ''
})
const editDialogVisible = ref(false)

const identityLabel = (identity) => {
  switch (identity) {
    case 1:
      return '管理员'
    case 2:
      return '作者'
    case 3:
      return '用户'
    default:
      return '未知'
  }
}

onMounted(() => {
  getUserInfo()
})

const getUserInfo = async () => {
  axios({
    url: '/api/user/individual/getAll',
    method: 'POST',
    params: {
      username: username,
      password: password
    }
  })
    .then((res) => {
      userdata.value = res.data.data
      console.log(res.data.data)
    })
    .catch((err) => {
      console.log(err)
      ElMessage.error('获取用户信息失败，请稍后再试')
    })
}

const editUser = (row) => {
  console.log('Editing user:', row) // 调试日志
  editForm.value = {
    ...row,
    identity: identityLabel(row.identity) // 确保身份字段显示为字符串
  }
  editDialogVisible.value = true
}


const saveEdit = () => {
  const password2 = editForm.value.password2
  const username2 = editForm.value.username
  axios({
    url: '/api/user/individual/edit',
    method: 'POST',
    params: {
      id: editForm.value.id,
      username: editForm.value.username,
      password: editForm.value.password,
      identity: 2, // 确保身份字段是数字类型
      userphone: editForm.value.userphone,
      userstate: Number(editForm.value.userstate) // 确保 userstate 是数字类型
    }
  })
    .then((res) => {
      ElMessage.success('用户信息更新成功')
      editDialogVisible.value = false
     router.push({
      path: '/writer/individual',
      query: { 
        username: username2,
        password: password2,
        identity: 2, // 确保身份字段是数字类型
       }
     })
      // getUserInfo() // 刷新用户信息
    })
    .catch((err) => {
      console.log(err)
      ElMessage.error('用户信息更新失败，请稍后再试')
    })
}
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-table {
  margin-bottom: 20px;
}

.el-dialog {
  width: 500px;
}
</style>